<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>

    <!--css-links-->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all">
    <!--//css-links-->
    <!--meta-tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords"
          content="Simple Statistics Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements"/>


    <style type="text/css">
        .box {
            width: 50px;
            text-align: right;
            line-height: 25px;
            display: inline;
            font-size: 8px;
            margin: 30px auto;
            padding: 12px;
            border: 1px solid black;
        }

        #cw,
        #cw1 {
            height: 20px;
        }

        html {
            height: 100%;
        }

        body {
            background: url("img/bg1.jpg") no-repeat top fixed;
            background-size: 100%;
            background-size: cover;
        }

        .container {
            width: 420px;
            height: 420px;
            min-height: 320px;
            max-height: 620px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            padding: 20px;
            z-index: 130;
            border-radius: 8px;
            box-shadow: 0 3px 18px rgba(100, 0, 0, .5);
            font-size: 16px;
            background: rgba(234, 255, 220, 0.25);
        }

        .layui-input {
            border-radius: 5px;
            width: 300px;
            height: 40px;
            font-size: 15px;
        }

        .layui-form-item {
            color: #0d1301;
        }

        #logoid {
            margin-top: -16px;
            padding-left: 150px;
            padding-bottom: 15px;
        }

        .verity {
            width: 120px;
        }

        .font-set {
            font-size: 13px;
            text-decoration: none;
            margin-left: 120px;
        }

        a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
<script src="layui/layui.js" charset="utf-8"></script>
<h1 style="color: #00ACEE">环绿回收</h1>
<!-- main-section -->
<div class="head agile">
    <div class="logo">
        <div class="logo-top wel">
            <img src="img/login-icon.jpg" alt="image"/>
            <h2>欢迎</h2>
        </div>
        <div class="logo-bottom w3layouts">
            <div class="sky-form">
                <label style="color:#00FF00;" class="radio"><input type="radio" name="radio" checked=""><i></i>Lorem
                    ipsum dolor sit
                    amet</label>
                <label style="color:#00FF00;" class="radio"><input type="radio" name="radio"><i></i>Adipiscing elit sed
                    do eiusmod</label>
                <label style="color:#00FF00;" class="radio"><input type="radio" name="radio"><i></i>Tempor incididunt ut
                    labore</label>
            </div>
        </div>
    </div>
    <div class="login w3">
        <div class="sap_tabs">
            <div id="horizontalTab" style="display: block; width: 100%; margin: auto">
                <ul class="resp-tabs-list">
                    <li class="resp-tab-item"><span>登录</span></li>
                    <li class="resp-tab-item"><label>/</label><span>手机快捷登录</span></li>

                </ul>
                <div class="resp-tabs-container">
                    <div class="tab-1 resp-tab-content">
                        <div class="login-top agileinfo">
                            <form class="layui-form" action="" method="post">
                                <input type="text" name="usernameOrTel" required  lay-verify="required" placeholder="请输入邮箱或手机号" autocomplete="off" class="layui-input">
                                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">

                                        <div class="layui-form-item">
                                            <div class="layui-block">
                                                <label class="layui-form-label">验证码：</label>
                                                <div class="layui-input-inline" style="margin-right: 0;">
                                                    <input type="text" name="captcha" id="captcha" lay-verify="required"
                                                           placeholder="输入下方验证码" autocomplete="off" class="layui-input">
                                                    <img id="captchaImg" src="http://localhost:8085/user/captcha.jpg"
                                                         style="width: 100%;" onclick="reloadCaptcha()">
                                                </div>
                                            </div>
                                        </div>

                                <div class="bottom-w3l">
                                    <div class="submit">
                                        <input type="submit" name="login" lay-submit lay-filter="login" value="登 录"/>
                                    </div>
                                    <div class="login-bottom login-bottom1">

                                        <div class="panel-footer">
                                            <a href="http://localhost:63342/indexlogin/login.html?_ijt=agidth3n689djrdhf3g0pk1nd7">注册</a>
                                            <a href="http://localhost:63342/indexlogin/RetrievePassword.html?_ijt=agidth3n689djrdhf3g0pk1nd7">&nbsp;&nbsp;忘记密码</a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="tab-1 resp-tab-content">
                        <div class="login-top agileits">
                            <form action="#" method="post">
                                <div>
                                    <input type="text" class="name active" placeholder="手机号" required/>
                                    <div id="cw"></div>
                                </div>
                                <div>
                                    <input style="width: 160px;height: 40px; display: inline;"
                                           type="id" class="email"
                                           placeholder="验证码" required
                                    />
                                    <span class="box">获取验证码 </span>
                                    <div id="cw3"></div>
                                </div>

                                <div class="bottom-w3l">
                                    <div class="submit sub1">
                                        <input type="submit" name="index" value="登录"/>
                                    </div>
                                    <div class="login-bottom agile">
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="clear"></div>
</div>
<!-- //main-section -->
<!-- copyright -->
<div class="footer agile-w3l">
</div>
<!-- //copyright -->
<!--script-->
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#horizontalTab').easyResponsiveTabs({
            type: 'default',
            width: 'auto',
            fit: true
        });
    });

</script>
<!--script-->
<script>
    function countDown() {
        var box = document.getElementsByClassName('box')[0];
        var time = 60;
        var timer;
        box.onclick = function () {
            clearInterval(timer);
            timer = setInterval(function () {
                if (time == 0) {
                    clearInterval(timer);
                    box.innerHTML = '点击重新获取';
                    time = 60;
                } else {
                    time--;
                    box.innerHTML = time + '秒可获取';
                }
            }, 1000)
        }
    }

    countDown()
</script>


</body>
<script type="text/javascript">
    sessionStorage.clear();
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;
        form.on('submit(login)', function (data) {
            /*sessionStorage.setItem("1",JSON.stringify(data.field));
            layer.alert(JSON.stringify(data.field), {
              title: '最终的提交信息'
            })*/
            $.ajax({
                url: "/user/login",
                method: 'POST',
                contentType: 'application/json',
                async: false,
                data: JSON.stringify(data.field),
                success: function (res) {
                    console.log(res);
                    /*if (res.code != 200) {
                        layer.alert(res.msg);
                        reloadCaptcha();
                    } else {*/
                        sessionStorage.setItem('userId', res.data.userId);
                        if (res.data.userType == 1) {
                            location.href = 'adminIndex.html';
                        } else if (res.data.userType == 0) {
                            location.href = 'userIndex.html';
                        } else if (res.data.userType == 2) {
                            location.href = 'superIndex.html';
                        }
                   // }
                }
            })
            return false;
        });
    })


    function reloadCaptcha() {
        $.ajax({
            url: '/user/captcha.jpg',
            // 把接收到的图片转成二进制
            xhr: function () {
                var xhr = new XMLHttpRequest()
                xhr.responseType = 'blob'
                return xhr
            },
            success: function (res) {
                var img = document.getElementById('captchaImg');
                var url = window.URL || window.webkitURL;
                img.src = url.createObjectURL(res);
            }
        })
    }
</script>
</html>
